<template>
  <div class="tool-box">
    <button @click="activateTool('point')">添加点</button>
    <button @click="activateTool('line')">添加线</button>
    <button @click="activateTool('area')">添加面</button>
    <button @click="activateTool('delete')">删除要素</button>
  </div>
</template>

<script setup>
import { inject, ref } from 'vue'
import Draw from 'ol/interaction/Draw'
import Select from 'ol/interaction/Select'
import { click } from 'ol/events/condition'
import addPoint from '../../map-gis-api/addPoint'
import addLine from '../../map-gis-api/addLine'
import addArea from '../../map-gis-api/addArea'
import deleteFeature from '../../map-gis-api/deleteFeature'

const mapInstance = inject('mapInstance')
const docLayer = inject('docLayer')
const activeTool = ref(null)
let drawInteraction = null
let selectInteraction = null

const activateTool = (tool) => {
  // 如果点击已激活的工具，则取消激活
  if (activeTool.value === tool) {
    activeTool.value = null
    removeInteractions()
    return
  }

  activeTool.value = tool
  removeInteractions()

  switch (tool) {
    case 'point':
      setupPointDrawing()
      break
    case 'line':
      setupLineDrawing()
      break
    case 'area':
      setupAreaDrawing()
      break
    case 'delete':
      setupFeatureSelection()
      break
  }
}

function removeInteractions() {
  if (drawInteraction) {
    mapInstance.value.removeInteraction(drawInteraction)
    drawInteraction = null
  }
  if (selectInteraction) {
    mapInstance.value.removeInteraction(selectInteraction)
    selectInteraction = null
  }
}

function setupPointDrawing() {
  drawInteraction = new Draw({
    source: docLayer.value.getSource(),
    type: 'Point',
    name: 'draw',
  })

  drawInteraction.on('drawend', (event) => {
    const coordinate = event.feature.getGeometry().getCoordinates()
    addPoint(coordinate, docLayer.value)
  })

  mapInstance.value.addInteraction(drawInteraction)
}

function setupLineDrawing() {
  drawInteraction = new Draw({
    source: docLayer.value.getSource(),
    type: 'LineString',
    name: 'draw',
  })

  drawInteraction.on('drawend', (event) => {
    const coordinates = event.feature.getGeometry().getCoordinates()
    addLine(coordinates, docLayer.value)
  })

  mapInstance.value.addInteraction(drawInteraction)
}

function setupAreaDrawing() {
  drawInteraction = new Draw({
    source: docLayer.value.getSource(),
    type: 'Polygon',
    name: 'draw',
  })

  drawInteraction.on('drawend', (event) => {
    const coordinates = event.feature.getGeometry().getCoordinates()[0] // 获取多边形外环坐标
    addArea(coordinates, docLayer.value)
  })

  mapInstance.value.addInteraction(drawInteraction)
}

function setupFeatureSelection() {
  selectInteraction = new Select({
    condition: click,
    layers: [docLayer.value],
    name: 'select',
  })

  selectInteraction.on('select', (event) => {
    const selectedFeatures = event.selected
    if (selectedFeatures.length > 0) {
      const feature = selectedFeatures[0]
      const fid = feature.getId()
      const layerIndex = 0 // 假设所有要素都在同一图层

      if (confirm('确定要删除这个要素吗？')) {
        deleteFeature({
          fids: [fid],
          layerIndex: layerIndex,
          layer: docLayer.value,
        })
      }
    }
  })

  mapInstance.value.addInteraction(selectInteraction)
}
</script>

<style scoped>
.tool-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.tool-box button {
  padding: 8px 12px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tool-box button:hover {
  background-color: #45a049;
}
</style>
